<template>
  <section class="header_top">
    <div class="header_top_l">
      <img class="custom_avator" src="@/assets/chatDetails/redelelopme.png" alt="" />
      <div class="custom_desc">
        <div class="custom_desc_title">红包模板</div>
        <div class="custom_desc_desc"> 员工通过侧边栏定向发红包，增加客户粘性 </div>
        <br />
        <div class="custom_desc_desc">使用该模块需要开通企业支付，<span @click="getNewStore">去开通</span> </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import router from '@/router'
//跳转新建门店
const getNewStore = () => {
  router.push(`/channelconfig/qywechat/enterprisepayment`)
}
</script>

<style lang="scss" scoped>
.header_top {
  padding: 20px;
  box-sizing: border-box;
  height: 132px;
  background: #ffffff;
  border: 1px solid #eaeaea;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .header_top_l {
    display: flex;
  }
  .custom_avator {
    width: 100px;
    height: 100px;
    margin-right: 16px;
  }
  .custom_intro {
    margin-left: 15px;
  }
  .custom_desc {
    .custom_desc_title {
      margin-top: 10px;
      font-size: 20px;
      font-family: STHeitiSC-Medium, STHeitiSC;
      font-weight: 500;
      color: #33302d;
      line-height: 21px;
      margin-bottom: 6px;
    }
    .custom_desc_desc {
      font-size: 14px;
      font-family: STHeitiSC-Light, STHeitiSC;
      font-weight: 300;
      color: #33302d;
      span {
        color: #ff6b00;
        font-size: 14px;
        cursor: pointer;
      }
      // line-height: 18px;
    }
  }
}
</style>
